<template>
  <div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form
        ref="form"
        :model="data"
        :rules="rules"
        :label-width="labelWidth"
        :label-position="labelPosition"
      >
        <Row type="flex" justify="space-between">
          <Col span="22">
            <Row :gutter="24" type="flex">
              <Col v-bind="grid">
                <DatePicker
                  type="daterange"
                  v-width="'100%'"
                  v-model="data.date"
                  placeholder="到诊日期选择"
                  element-id="date"
                  @on-change="formChangeData"
                />
              </Col>
              <Col v-bind="grid">
                <Input
                  v-model="data.name"
                  placeholder="请输入患者姓名/手机号/诊疗号"
                  clearable
                  element-id="name"
                  @on-clear="empty"
                  @on-enter="formChangeDatas(1)"
                />
              </Col>
              <Col v-bind="grid">
                <FormItem label="来源渠道" prop="channel" label-for="channel">
                  <Select
                    v-model="data.channel"
                    clearable
                    placeholder="渠道"
                    element-id="channel"
                    @on-change="formChangeData"
                  >
                    <Option
                      v-for="item in fdata.channel"
                      :value="item.id"
                      :key="item.id"
                      :disabled="+item.status === 0"
                      >{{ item.name }}
                    </Option>
                  </Select>
                </FormItem>
              </Col>
              <Col v-bind="grid">
                <FormItem label="病种类型" prop="disease" label-for="disease">
                  <Select
                    v-model="data.disease"
                    clearable
                    placeholder="病种"
                    element-id="disease"
                    @on-change="formChangeData"
                  >
                    <Option
                      v-for="item in fdata.disease"
                      :value="item.id"
                      :key="item.id"
                      :disabled="+item.status === 0"
                      >{{ item.name }}
                    </Option>
                  </Select>
                </FormItem>
              </Col>
              <Col v-bind="grid">
                <FormItem label="诊室" prop="disease" label-for="disease">
                  <Select
                    v-model="data.clinic_id"
                    clearable
                    placeholder="请选择诊室"
                    element-id="disease"
                    @on-change="formChangeData"
                  >
                    <Option
                      v-for="item in fdata.clinic_list"
                      :value="item.id"
                      :key="item.id"
                      :disabled="+item.status === 0"
                      >{{ item.name }}
                    </Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
          </Col>
          <Col span="2" v-if="registers">
            <Button type="primary" @click="register">登记患者</Button>
          </Col>
        </Row>
      </Form>
      <div class="i-table-no-border">
        <Table
          size="small"
          ref="table"
          :columns="columns"
          :data="tdata"
          :loading="loading"
          @on-sort-change="handleChangeSort"
        >
          <template slot-scope="{ row }" slot="source_name">
            <Badge status="success" :text="row.source_name" />
          </template>
          <template slot-scope="{ row }" slot="operation">
            <a v-if="hqinfo" @click="handleDetailPatient(row)">详细</a>
          </template>
        </Table>
        <div class="ivu-mt ivu-text-center">
          <Page
            :total="page.total"
            :current.sync="page.page"
            show-total
            show-elevator
            show-sizer
            transfer
            :page-size="page.pageSize"
            @on-change="formChangePage"
            :page-size-opts="pageOpts"
            @on-page-size-change="formSize"
          />
        </div>
      </div>
    </Card>
    <Drawer
      :closable="false"
      v-model="showTetailDrawer"
      width="1000"
      class="edtailDrawers"
    >
      <detailDrawer
        :editType="edit_type"
        v-if="patientId && showTetailDrawer"
        :patientId="patientId"
      >
      </detailDrawer>
    </Drawer>
    <register
      @askData="formChange"
      ref="register"
      :channel="fdata.channel"
      :clinic_list="fdata.clinic_list"
    />
  </div>
</template>
<script>
import { GuideList, GuideInfo } from "@/api/medical";
import { mapState } from "vuex";
import detailDrawer from "../patient/patient-detail/index.vue";
import register from "./register.vue";

export default {
  components: {
    detailDrawer,
    register,
  },
  name: "medical",
  data() {
    return {
      patientId: null,
      edit_type: 2,
      showTetailDrawer: false,
      loading: false,
      page: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      pageOpts: [10, 20, 30, 50],
      columns: [
        {
          title: "基本信息",
          key: "basic",
          minWidth: 138,
          fixed: "left",
        },
        {
          title: "诊疗号",
          key: "patient_card_id",
          minWidth: 130,
        },
        {
          title: "诊室",
          key: "clinic_name",
          minWidth: 100,
        },
        {
          title: "到诊时间",
          key: "created_at_str",
          sortable: true,
          minWidth: 160,
        },
        {
          title: "电话",
          key: "mobile",
          minWidth: 138,
        },
        {
          title: "地区",
          key: "city_name",
          minWidth: 100,
        },
        {
          title: "病种",
          key: "diseases_name",
          minWidth: 100,
        },
        {
          title: "来源",
          slot: "source_name",
          minWidth: 120,
        },
        {
          title: "操作",
          slot: "operation",
          minWidth: 120,
        },
      ],
      tdata: [],
      grid: {
        xl: 4,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      collapse: false,
      data: {
        name: "",
        date: [new Date(), new Date()],
        consultant: "",
        channel: "",
        disease: "",
        clinic_id: "",
      },
      fdata: [],
      rules: {},
      sort: 0,
      hqinfo: false,
      registers: false,
    };
  },
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    labelWidth() {
      return this.isMobile ? undefined : 80;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    },
  },
  mounted() {
    this.state = JSON.parse(localStorage.getItem("poweredit"));
    for (let item of this.state) {
      if (item.name === "导医详细") {
        this.hqinfo = item.bool;
      } else if (item.name === "导医-登记患者") {
        this.registers = item.bool;
      }
    }
    this.formChange();
    // this.getData({
    //   page: this.page.page,
    //   pageSize: this.page.pageSize,
    // });
  },
  methods: {
    closeDrawer() {
      this.getData({
        page: this.page.page,
        pageSize: this.page.pageSize,
      });
    },
    // 清空
    empty() {
      this.formChange();
      // this.getData({
      //   page: this.page.page,
      //   pageSize: this.page.pageSize,
      // });
    },
    // 排序
    handleChangeSort(column) {
      if (column.order === "desc") {
        this.sort = 1;
      } else {
        this.sort = 2;
      }
      this.formChange();
    },
    // 获取列表数据
    getData(data) {
      this.loading = true;
      GuideList(data)
        .then((res) => {
          for (let i in res.list) {
            res.list[i]["basic"] = [
              res.list[i]["name"],
              res.list[i]["gender_str"],
              res.list[i]["age"],
            ].join(" ");
          }
          this.tdata = res.list;
          this.fdata.disease = res.condition.patient_diseases_list;
          this.fdata.channel = res.condition.source_channel_list;
          this.fdata.clinic_list = res.condition.clinic_list;
          this.page.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 时间
    formChangeData(val) {
      if (val === 1) {
        this.data.date = "";
        this.data.channel = "";
        this.data.disease = "";
      } else this.data.name = "";
      this.page.page = 1;
      this.formChange();
    },
    formChangeDatas(val) {
      if (this.data.name === "") {
      } else {
        if (val === 1) {
          this.data.date = "";
          this.data.channel = "";
          this.data.disease = "";
        } else this.data.name = "";
        this.page.page = 1;
        this.formChange();
      }
    },
    // 分页
    formChangePage(e) {
      this.page.page = e;
      this.formChange();
    },
    // 页数
    formSize(i) {
      this.page.pageSize = i;
      this.formChange();
    },
    // 处理数据
    formChange() {
      let day = document.querySelector("#date").value;
      if (day) {
        day = day.split(/\s-\s/);
      } else {
        day = ["", ""];
      }
      let data = {
        patient_diseases_id: this.data.disease,
        clinic_id: this.data.clinic_id,
        source_channel_id: this.data.channel,
        start_time: day[0],
        end_time: day[1],
        keywords: this.data.name,
        page: this.page.page,
        pageSize: this.page.pageSize,
        sort: this.sort,
      };
      this.getData(data);
    },
    handleDetailPatient(row) {
      this.patientId = row.id;
      this.showTetailDrawer = true;
      // this.$store.commit('admin/page/setPatientDetail', { patientId: row.id, edit_type: 2 })
      // this.$router.push('/patient/detail')
    },
    register() {
      this.$refs.register.initial();
    },
  },
};
</script>
